<template>
  <div title="字号" class="tlbr-btn hm">
    <div
      class="tlbr-btn__icon"
      v-html="getFontSizeOptItem(fontSizeType)?.icon"
    ></div>
    <svg
      width="4"
      height="4"
      viewBox="0 0 4 4"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="tlbr-btn__dot"
    >
      <path d="M4 0V4H0L4 0Z" fill="#222222"></path>
    </svg>
    <div class="tlbr-btn__more">
      <div class="tlbr-btn__more__tooltip">
        <ul class="bre-toolbar__optlist text-size">
          <li
            class="bre-toolbar__optbtn"
            v-for="item in list"
            :key="item.value"
            @click="handleClick(item)"
          >
            <div class="bre-toolbar__optbtn__icon" v-html="item.icon"></div>
            <div class="bre-toolbar__optbtn__lab">{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, shallowRef, computed } from 'vue'
import { FontSizeType } from './type'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const emits = defineEmits<{
  (e: 'change', value: FontSizeType): void
}>()
const fontSizeType = computed(() => {
  return formatMap.value.header
})

const H1Svg = `
<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M6.4999 4.90002C6.16853 4.90002 5.8999 5.16865 5.8999 5.50002V17.5C5.8999 17.8314 6.16853 18.1 6.4999 18.1C6.83127 18.1 7.0999 17.8314 7.0999 17.5V12.1H13.8999V17.5C13.8999 17.8314 14.1685 18.1 14.4999 18.1C14.8313 18.1 15.0999 17.8314 15.0999 17.5V5.50002C15.0999 5.16865 14.8313 4.90002 14.4999 4.90002C14.1685 4.90002 13.8999 5.16865 13.8999 5.50002V10.9H7.0999V5.50002C7.0999 5.16865 6.83127 4.90002 6.4999 4.90002Z"
    fill="currentColor"
  ></path>
  <path
    d="M20.1399 10.86C20.1399 10.7496 20.0503 10.66 19.9399 10.66H19.2999C19.2427 10.66 19.1883 10.6845 19.1504 10.7272C18.9239 10.9819 18.659 11.2096 18.3348 11.4198C18.011 11.6098 17.6882 11.7424 17.3857 11.8275C17.2995 11.8518 17.2399 11.9304 17.2399 12.02V12.84C17.2399 12.9739 17.3688 13.07 17.4971 13.0317C18.036 12.8708 18.5114 12.6337 18.9199 12.3092V17.59C18.9199 17.9269 19.193 18.2 19.5299 18.2C19.8668 18.2 20.1399 17.9269 20.1399 17.59V10.86Z"
    fill="currentColor"
  ></path>
</svg>
`
const H2Svg = `
<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M5.8999 5.50002C5.8999 5.16865 6.16853 4.90002 6.4999 4.90002C6.83127 4.90002 7.0999 5.16865 7.0999 5.50002V10.9H13.8999V5.50002C13.8999 5.16865 14.1685 4.90002 14.4999 4.90002C14.8313 4.90002 15.0999 5.16865 15.0999 5.50002V17.5C15.0999 17.8314 14.8313 18.1 14.4999 18.1C14.1685 18.1 13.8999 17.8314 13.8999 17.5V12.1H7.0999V17.5C7.0999 17.8314 6.83127 18.1 6.4999 18.1C6.16853 18.1 5.8999 17.8314 5.8999 17.5V5.50002Z"
    fill="currentColor"
  ></path>
  <path
    d="M18.0908 12.052L18.0988 12.0415C18.3129 11.7615 18.6277 11.62 19.0699 11.62C19.4965 11.62 19.812 11.731 20.0243 11.927C20.2346 12.1212 20.3499 12.3929 20.3499 12.79C20.3499 13.1896 20.1864 13.5727 19.8539 13.9333C19.6789 14.1172 19.3253 14.3961 18.7653 14.7961C18.0024 15.3182 17.4771 15.7586 17.1805 16.097C16.9842 16.314 16.8264 16.5417 16.7065 16.7797C16.6353 16.921 16.5806 17.0646 16.539 17.2104C16.3875 17.7415 16.8676 18.2 17.4199 18.2H21.0149C21.327 18.2 21.5799 17.9471 21.5799 17.635C21.5799 17.323 21.327 17.07 21.0149 17.07H17.93C18.0053 16.9369 18.1145 16.7922 18.2624 16.6365C18.509 16.3769 18.8543 16.0958 19.3019 15.7957C20.0442 15.2942 20.5488 14.8946 20.8141 14.6187L20.8171 14.6154C21.306 14.0841 21.5699 13.4772 21.5699 12.8C21.5699 12.128 21.3288 11.5622 20.8637 11.1413L20.8624 11.1402C20.3906 10.7233 19.8013 10.52 19.0999 10.52C18.3318 10.52 17.6858 10.778 17.2032 11.3041C16.8839 11.6455 16.6698 12.0652 16.562 12.5543C16.5339 12.6815 16.5153 12.8092 16.503 12.9374C16.4707 13.2746 16.7545 13.55 17.0932 13.55C17.4281 13.55 17.6867 13.2797 17.7305 12.9477C17.7405 12.8716 17.7538 12.7958 17.7714 12.7204C17.8375 12.4374 17.947 12.2163 18.0908 12.052Z"
    fill="currentColor"
  ></path>
</svg>

`
const TextSvg = `
<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M5.9999 5.40002C5.39239 5.40002 4.8999 5.89251 4.8999 6.50002V8.00002C4.8999 8.3314 5.16853 8.60002 5.4999 8.60002C5.83127 8.60002 6.0999 8.3314 6.0999 8.00002V6.60002H11.3999V17.9H9.9999C9.66853 17.9 9.3999 18.1687 9.3999 18.5C9.3999 18.8314 9.66853 19.1 9.9999 19.1H13.9999C14.3313 19.1 14.5999 18.8314 14.5999 18.5C14.5999 18.1687 14.3313 17.9 13.9999 17.9H12.5999V6.60002H17.8999V8.00002C17.8999 8.3314 18.1685 8.60002 18.4999 8.60002C18.8313 8.60002 19.0999 8.3314 19.0999 8.00002V6.50002C19.0999 5.89251 18.6074 5.40002 17.9999 5.40002H5.9999Z"
    fill="currentColor"
  ></path>
</svg>
`
interface FONTSIZE_OPT_ITEM {
  name: string
  value: FontSizeType
  icon: string
}
const list = ref<FONTSIZE_OPT_ITEM[]>([
  {
    name: '标题1',
    value: FontSizeType.H1,
    icon: H1Svg,
  },
  {
    name: '标题2',
    value: FontSizeType.H2,
    icon: H2Svg,
  },
  {
    name: '正文',
    value: FontSizeType.P,
    icon: TextSvg,
  },
])
const typeMap = new Map<FontSizeType, FONTSIZE_OPT_ITEM>()
list.value.forEach((item) => {
  typeMap.set(item.value, item)
})
const getFontSizeOptItem = (type: FontSizeType = FontSizeType.P) => {
  return typeMap.get(type) || null
}
const handleClick = (item: FONTSIZE_OPT_ITEM) => {
  QuillEditor.value!.focus()
  QuillEditor.value!.format('header', item.value || false)
  emits('change', item.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
